<template>
	<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
	         class="demo-ruleForm login-container">
		<h3 class="title">系统登录</h3>
		<el-form-item prop="account">
			<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
		</el-form-item>
		<el-form-item prop="checkPass">
			<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"
			          @keydown.native="show($event,'ruleForm2')"></el-input>
		</el-form-item>
		<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
		<el-form-item style="width:100%;">
			<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录
			</el-button>
			<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
		</el-form-item>
	</el-form>
</template>

<script>
	import {requestLogin} from '../api/api';
	import {setCookie, delCookie} from "@/api/util";
	
	export default {
		data() {
			return {
				logining: false,
				ruleForm2: {
					account: '',
					checkPass: ''
				},
				rules2: {
					account: [
						{required: true, message: '请输入账号', trigger: 'blur'},
						//{ validator: validaePass }
					],
					checkPass: [
						{required: true, message: '请输入密码', trigger: 'blur'},
						//{ validator: validaePass2 }
					]
				},
				checked: true
			};
		},
		methods: {
			handleReset2() {
				this.$refs.ruleForm2.resetFields();
			},
			handleSubmit2(ev) {
				this.$refs.ruleForm2.validate((valid) => {
					if (valid) {
						let _this = this;
						delCookie('token');
						delCookie('X-Auth-Token');
						sessionStorage.removeItem('Auth')
						localStorage.removeItem('user')
						this.logining = true;
						let loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
						requestLogin(loginParams).then(data => {
							this.logining = false;
							localStorage.setItem('user', JSON.stringify(data.data.token));
							let day = data.data.expireSeconds / (3600 * 24);
							setCookie('token', data.data.token.token, day);
							sessionStorage.setItem('Auth', data.data.token.token);
							localStorage.setItem('authority', data.data.authority);
							if (data.data.authority == 2) {
								localStorage.setItem('userIds', JSON.stringify(data.data.userIds));
								localStorage.setItem('role', data.data.role);
								localStorage.setItem('positionIds', JSON.stringify(data.data.positionIds));
							}
							localStorage.setItem('userName', _this.ruleForm2.account);
							_this.$router.push({path: '/admin/welcome'});
						}).catch(error => {
							setTimeout(() => {
								this.logining = false
							}, 1000)
						});
					} else {
						return false;
					}
				});
			},
			show(ev, ruleForm2) {
				if (ev.keyCode == 13) {
					let self = this;
					this.$refs[ruleForm2].validate((valid) => {
						if (valid) {
							delCookie('token');
							delCookie('X-Auth-Token');
							sessionStorage.removeItem('Auth')
							localStorage.removeItem('user')
							this.logining = true;
							let loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
							requestLogin(loginParams).then(data => {
								this.logining = false;
								localStorage.setItem('user', JSON.stringify(data.data.token));
								let day = data.data.expireSeconds / (3600 * 24);
								setCookie('token', data.data.token.token, day);
								sessionStorage.setItem('Auth', data.data.token.token);
								localStorage.setItem('authority', data.data.authority);
								if (data.data.authority == 2) {
									localStorage.setItem('userIds', JSON.stringify(data.data.userIds));
									localStorage.setItem('role', data.data.role);
									localStorage.setItem('positionIds', JSON.stringify(data.data.positionIds));
								}
								localStorage.setItem('userName', self.ruleForm2.account);
								self.$router.push({path: '/admin/welcome'});
							}).catch(error => {
								setTimeout(() => {
									this.logining = false
								}, 1000)
							})
						} else {
							return false;
						}
					});
					
				}
			}
		}
	}

</script>

<style lang="scss" scoped>
	.login-container {
		/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		background-clip: padding-box;
		margin: 180px auto;
		width: 350px;
		padding: 35px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
		.title {
			margin: 0px auto 40px auto;
			text-align: center;
			color: #505458;
		}
		.remember {
			margin: 0px 0px 35px 0px;
		}
	}
</style>
